<template>
  <el-dialog
    title="创建账号"
    :visible.sync="dialogVisible"
    width="600px"
    @open="clearPwd"
    center
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      style="width: 90%;"
    >
      <el-form-item label="用户名" prop="loginName">
        <el-input
          type="text"
          v-model="ruleForm.loginName"
          autocomplete="off"
          minlength="2"
          maxlength="16"
          placeholder="请输入用户名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input
          type="text"
          v-model="ruleForm.nickName"
          autocomplete="off"
          minlength="2"
          maxlength="16"
          placeholder="请输入昵称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="text"
          v-model="ruleForm.password"
          autocomplete="off"
          minlength="8"
          maxlength="16"
          placeholder="请输入8-16位字符(可以是数字、符号、英文)"
          clearable
          :show-password="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPwd">
        <el-input
          type="text"
          v-model="ruleForm.checkPwd"
          autocomplete="off"
          minlength="8"
          maxlength="16"
          placeholder="请输入8-16位字符(可以是数字、符号、英文)"
          clearable
          :show-password="true"
        ></el-input>
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          :loading="disabled"
        >
          提交
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addSub } from 'src/api/user'
export default {
  data() {
    let validateUser = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    let validateNickName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入昵称'))
      } else {
        callback()
      }
    }
    let validatePass1 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error('密码不能设置中文！'))
        } else if (value.length < 8) {
          callback(new Error('密码长度为8到16个字符！'))
        } else if (this.ruleForm.checkPwd !== '') {
          // this.$refs.ruleForm.validateField('checkPwd')
          callback()
        } else {
          callback()
        }
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value=='') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      ruleForm: {
        loginName: '',
        nickName: '',
        password: '',
        checkPwd: '',
      },
      disabled: false,
      rules: {
        loginName: [{ validator: validateUser, trigger: 'blur' }],
        nickName: [{ validator: validateNickName, trigger: 'blur' }],
        password: [{ validator: validatePass1, trigger: 'blur' }],
        checkPwd: [{ validator: validatePass2, trigger: 'blur' }],
      },
    }
  },
  methods: {
    //   打开弹窗
    show() {
      this.dialogVisible = true
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 添加
    submitForm(formName) {
      this.disabled = true

      window.setTimeout(() => {
        this.disabled = false
      }, 2000)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          addSub({
            loginName: this.ruleForm.loginName,
            nickName: this.ruleForm.nickName,
            pwd: this.ruleForm.password,
          }).then((response) => {
            if (response.code == 20000) {
              this.$message.success({
                message: '创建账号成功！',
                duration: 2000,
                center: true,
              })
              this.dialogVisible = false
              this.$emit('addSuccess')
            }
          })
        } else {
          return false
        }
      })
    },
    clearPwd() {
      this.ruleForm = {}
    },
  },
}
</script>

<style lang="scss" scoped></style>
